<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/bootstrap/4/bootstrap.css">
    <link rel="stylesheet" href="css/MyInformation/information.css">
    <!--    &lt;!&ndash;蓝色为  rgb(24, 132, 253);      #1884FD      &ndash;&gt;-->
    <!--    &lt;!&ndash; 总体颜色为    background-color: rgb(15, 15, 15); &ndash;&gt;-->
    <script src="js/bootstrap/4/jquery-3.1.1.js"></script>
    <script src="js/bootstrap/4/bootstrap.bundle.min.js"></script>
    <script src="js/myJs.js"></script>
</head>
<body>


<!--顶部-->
<div class="top-fixed-information">
    <div class="fanhui-body">
        <a style="padding-left: 10px;" href="index_Store.html">商城</a>
        <a href="GameLibrary.html">游戏库</a>
        <a href="Community.html">社区</a>
    </div>
    <div class="title-body"><h4>我的信息</h4></div>
    <div class="brand-body">
        <img src="images/navigation/navigation_top/icon_shangbiao2.png" alt="">
    </div>
</div>


<!--背景body-->
<div class="body">
    <!--    <video style="width: 100%;" muted autoplay loop src="images/MyInformation/video/body2.webm"></video>-->
    <video style="width: 100%;" muted autoplay loop src="images/MyInformation/video/body.webm"></video>
    <!--内容-->
    <div class="content-body">
        <!--左-->
        <div class="inf-zuo-content-body">
            <!--头像-->
            <div class="touxiang-body">
                <div class="touxiang-img-body"><img src="images/MyInformation/imgges/touxiang/touxiang.gif" alt="">
                </div>
                <div style="padding-left: 20px">
                    <h1 style="color: white">MICHEAL</h1>
                    <h3 style="color:white;">6级</h3>
                </div>
            </div>
            <!--最新动态线条-->
            <div class="zuixindongtai-body">
                <h5>最新动态</h5>
                <h5>18.3 小时（过去 2 周）</h5>
            </div>
            <!--动态内容1-->
            <div class="dongtai-content-body">
                <!--名字与图片-->
                <div class="content-img-name-body">
                    <div class="dongtai-content-img"><img src="images/MyInformation/imgges/content/content-1.jpg"
                                                          alt="">
                    </div>
                    <div class="name-shijian">
                        <h5>植物大战僵尸</h5>
                        <h6>总时数：7.6小时<p>最后运行日期：6月5日</h6>
                    </div>
                    <div></div>
                </div>
                <!--成就-->
                <div class="content-chengjiu-body">
                    <div><h5 style="color: #c7c7c7;font-size: 0.9em;margin: 0;">成就进度： 5/23</h5></div>
                    <div class="chengjiu-img-body">
                        <img src="images/MyInformation/imgges/chengjiu/zhi1.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/zhi2.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/zhi3.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/zhi4.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/zhi5.jpg" alt="">
                    </div>
                </div>
            </div>

            <!--动态内容2-->
            <div class="dongtai-content-body">
                <!--名字与图片-->
                <div class="content-img-name-body">
                    <div class="dongtai-content-img"><img src="images/MyInformation/imgges/content/content-2.jpg"
                                                          alt="">
                    </div>
                    <div class="name-shijian">
                        <h5>底特律：化身为人</h5>
                        <h6>总时数：13.4小时<p>最后运行日期：5月15日</h6>
                    </div>
                    <div></div>
                </div>
                <!--成就-->
                <div class="content-chengjiu-body">
                    <div><h5 style="color: #c7c7c7;font-size: 0.9em;margin: 0;">成就进度： 5/23</h5></div>
                    <div class="chengjiu-img-body">
                        <img src="images/MyInformation/imgges/chengjiu/di1.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/di2.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/di3.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/di4.jpg" alt="">
                        <img src="images/MyInformation/imgges/chengjiu/di5.jpg" alt="">
                    </div>
                </div>
            </div>

            <!--动态内容3-->
            <div class="dongtai-content-body">
                <!--名字与图片-->
                <div class="content-img-name-body">
                    <div class="dongtai-content-img"><img src="images/MyInformation/imgges/content/content-3.jpg"
                                                          alt="">
                    </div>
                    <div class="name-shijian">
                        <h5>神力科莎：竞速</h5>
                        <h6>总时数：97.5小时<p>最后运行日期：6月10日</h6>
                    </div>
                    <div></div>
                </div>
                <!--成就-->
            </div>

        </div>
        <!--右-->
        <div class="inf-you-content-body">
            <div class="chenghao-body">
                <img src="images/MyInformation/imgges/you/level01_54.png" alt="">
                <h6>2021 年 Steam 大奖提名委员会</h6>
            </div>
            <div class="chenghao-body" style="margin-top: 7px;">
                <img src="images/MyInformation/imgges/you/level01_54.png" alt="">
                <h6>2022 年 Steam 游戏测评委员会</h6>
            </div>

            <button class="bianji-button">编辑资料</button>

            <!--当前在线-->
            <div class="zaixian-body">
                <h2 style="color: #006db7;font-size: 1.4em;">当前在线</h2>
                <div class="huizhang-body">
                    <div class="huizhang-title">
                        <h5>徽章</h5>
                        <h4>3</h4>
                    </div>
                    <div class="huizhang-img">
                        <img src="images/MyInformation/imgges/huizhang/huizhang1.png" alt="">
                        <img src="images/MyInformation/imgges/huizhang/huizhang2.png" alt="">
                        <img src="images/MyInformation/imgges/huizhang/huizhang3.png" alt="">
                    </div>
                </div>

                <!--游戏-->
                <div class="huizhang-title">
                    <a href=""><h5 style="color: #ffffff;font-size: 0.9em;">游戏</h5></a>
                    <h4>12</h4>
                </div>

                <div class="huizhang-title">
                    <h5>评测</h5>
                    <h4>61</h4>
                </div>
                <div class="huizhang-title">
                    <h5>创意工坊物品</h5>
                    <h4>6</h4>
                </div>
                <div class="huizhang-title">
                    <h5>艺术作品</h5>
                    <h4>6</h4>
                </div>



            </div>


        </div>


    </div>

    <!--底部 占位 -->
    <div class="end-body">
    </div>


</div>



</body>
</html>